<template>
  <s-layout title="店铺" tabbar="/pages/index/cart" :bgStyle="{ color: '#fff' }">
    <s-empty
      v-if="state.list.length === 0"
      :text="$t('pages.cart.emptyText')"
      icon="/static/cart-empty.png"
    />

    <!-- 内容 -->
    <view class="cart-box ss-flex ss-flex-col ss-row-between" v-if="state.list.length">
      <view class="cart-content ss-flex-1 ss-p-x-30 ss-m-b-40">
          <view
            class="goods-box ss-r-10 ss-m-b-14"
            v-for="(item, index) in state.list"
            :key="item.id"
            @tap="onItemClick(item.id)"
            :style="index < state.list.length - 1 ? 'border-bottom: 1px solid #eee; padding-bottom: 20rpx;' : ''"
          >
            <view class="ss-flex ss-col-center">
              <s-goods-item
                :title="item.title"
                :img="item.image"
                :price="isArray(item.price) ? item.price[0] : item.price"
                :skuText="item.goods_sku_text"
                priceColor="#FF3000"
                :titleWidth="400"
              />
            </view>
          </view>
        </view>

      <!-- 底部 -->
     <!-- <su-fixed bottom :val="48" placeholder v-if="state.list.length > 0" :isInset="false">
        <view class="cart-footer ss-flex ss-col-center ss-row-between ss-p-x-30 border-bottom">
          <view class="footer-left ss-flex ss-col-center">
            <text>{{$t('pages.cart.total')}}：</text>
            <view class="text-price price-text">
              {{ state.totalPriceSelected }}
            </view>
          </view>
          <view class="footer-right" style="flex: 1;">
            <button
              class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
			  style="width: 100%;"
              @tap="onConfirm"
            >
              购买
            </button>
          </view>
        </view>
      </su-fixed> -->
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed, reactive } from 'vue';
  import { isArray } from 'lodash';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';

  const sys_navBar = sheep.$platform.navbar;
  const purchasing = sheep.$store('purchasing');

  const state = reactive({
    list: computed(() => purchasing.list),
    selectedIds: computed(() => purchasing.selectedIds),
    totalPriceSelected: computed(() => {
      const selectedItem = state.list.find(item => state.selectedIds.includes(item.id));
      return selectedItem ? selectedItem.price : 0;
    }),
  });

  onLoad(() => {
    purchasing.getList();
  });

  // 单选选中
  function onSelectSingle(id) {
    purchasing.selectAll(false); // 取消全选
    purchasing.selectSingle(id); // 选中当前项
  }
  function onItemClick(itemId) {
    // 跳转到目标页面，并携带参数
    uni.navigateTo({
      url: `/pages/goods/index?id=${itemId}`, // 替换为目标页面的路径
    });
  }

  // 结算
  function onConfirm() {
    if (state.selectedIds.length === 0) {
      sheep.$helper.toast('请选择商品');
      return;
    }

    const selectedItem = state.list.find(item => state.selectedIds.includes(item.id));
    const goods_list = [
      {
        goods_id: selectedItem.id,
        goods_num: selectedItem.goods_num,
        goods_sku_price_id: selectedItem.new_sku_prices[0].id,
      },
    ];

    sheep.$api.store.shopRestock({ goods_list }).then(res => {
      sheep.$helper.toast('进货成功');
    });
  }
</script>


<style lang="scss" scoped>
  :deep(.ui-fixed) {
    height: 72rpx;
  }

  .cart-box {
    width: 100%;

    .cart-header {
      height: 70rpx;
      background-color: #f6f6f6;
      width: 100%;
      position: fixed;
      left: 0;
      top: v-bind('sys_navBar') rpx;
      z-index: 1000;
      box-sizing: border-box;
    }

    .cart-footer {
      height: 100rpx;
      background-color: #fff;

      .pay-btn {
        width: 180rpx;
        height: 70rpx;
        font-size: 28rpx;
        line-height: 28rpx;
        font-weight: 500;
        border-radius: 40rpx;
      }
    }

    .cart-content {
      margin-top: 70rpx;
      .goods-box {
        background-color: #fff;
      }
    }
  }
</style>
